<template>
  <a-modal title-align="start" title="添加部门" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="400">
    <a-space>
      <div>部门：</div>
      <a-select allow-search allow-clear style="width: 300px" v-model="departId" placeholder="请选择部门">
        <a-option v-for="(item, index) of departList" :key="index" :label="item.deptName" :value="item.id"></a-option>
      </a-select>
    </a-space>

    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="showvisible = false">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { findDeptList } from '@/api/product'
  import { defineComponent, ref, computed, onMounted } from 'vue'

  let props = defineProps(['modelValue', 'type', 'info'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let departId = ref('')
  let departList: any = ref([])

  const getdepartmentList = async () => {
    const res: any = await findDeptList()
    if (res) {
      departList.value = res.data
    }
  }

  onMounted(() => {
    getdepartmentList()
  })
</script>

<style lang="less" scoped></style>
